<template>
  <div class="slider">
    <van-field name="slider" label="滑块">
      <template #input>
        <van-slider v-model="slider" @change="change" />
      </template>
    </van-field>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: 'slider',
  inject: ['element'],
  data() {
    return {
      slider: 0
    }
  },
  computed: {
    formId() {
      return this.element.formId
    },
    vModel() {
      return this.element.vModel
    }
  },
  watch: {
    vModel(val) {
      this.slider = val === '' ? 0 : Number(val)
    }
  },
  methods: {
    ...mapMutations('pageData', ['SETVMODEL']),
    change(val) {
      this.SETVMODEL({
        value: String(val),
        formId: this.formId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell::after {
  display: block;
}
</style>